<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>消息通知系统 - 编辑</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.13/theme-chalk/index.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.snow.min.css">
  <link rel="stylesheet" href="css/edit.css">
</head>
<body>
<div id="app">
  <div class="app-container">
    <div class="page-header">
      <h1 class="page-title">{{ isEdit ? '编辑消息' : '新增消息' }}</h1>
      <el-button size="small" @click="goBack">返回列表</el-button>
    </div>

    <div class="form-container">
      <el-form :model="messageForm" :rules="rules" ref="messageForm" label-width="120px" size="small">
        <!-- 基本信息 -->
        <div class="form-section">
          <h3 class="form-section-title">基本信息</h3>

          <el-form-item label="通知人群" prop="target_type" class="required-field">
            <el-radio-group v-model="messageForm.target_type" @change="handleTargetTypeChange">
              <el-radio :label="1">所有用户</el-radio>
              <el-radio :label="2">指定角色</el-radio>
              <el-radio :label="3">指定用户</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item
              v-if="messageForm.target_type === 2"
              label="选择角色"
              prop="role_ids"
              class="required-field"
          >
            <el-select
                v-model="messageForm.role_ids"
                multiple
                placeholder="请选择角色"
                style="width: 100%"
            >
              <el-option
                  v-for="item in roleOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item
              v-if="messageForm.target_type === 3"
              label="选择用户"
              prop="user_ids"
              class="required-field"
          >
            <el-select
                v-model="messageForm.user_ids"
                multiple
                filterable
                remote
                reserve-keyword
                placeholder="请输入用户名搜索"
                :remote-method="remoteSearchUsers"
                :loading="userLoading"
                style="width: 100%"
            >
              <el-option
                  v-for="item in userOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="通知类型" prop="notification_type" class="required-field">
            <el-checkbox-group v-model="messageForm.notification_type">
              <el-checkbox label="app_popup">App弹框</el-checkbox>
              <el-checkbox label="app_push" disabled>App推送</el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <el-form-item label="优先级" prop="priority" class="required-field">
            <el-select v-model="messageForm.priority" placeholder="请选择优先级">
              <el-option label="紧急" :value="1"></el-option>
              <el-option label="高" :value="2"></el-option>
              <el-option label="中" :value="3"></el-option>
              <el-option label="低" :value="4"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="生效时间" prop="effective_time" class="required-field">
            <el-date-picker
                v-model="messageForm.effective_time"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期时间"
                end-placeholder="结束日期时间"
                value-format="timestamp"
                :default-time="['00:00:00', '23:59:59']"
            ></el-date-picker>
          </el-form-item>
        </div>

        <!-- 内容设置 -->
        <div class="form-section">
          <h3 class="form-section-title">内容设置</h3>

          <div class="language-tabs">
            <el-tabs v-model="activeLanguage" type="card">
              <el-tab-pane label="中文" name="zh"></el-tab-pane>
              <el-tab-pane label="English" name="en"></el-tab-pane>
              <el-tab-pane label="ភាសាខ្មែរ" name="km"></el-tab-pane>
              <el-tab-pane label="Filipino" name="fil"></el-tab-pane>
            </el-tabs>
          </div>

          <el-form-item
              label="标题"
              :prop="'contents.' + activeLanguage + '.title'"
              class="required-field"
          >
            <el-input
                v-model="messageForm.contents[activeLanguage].title"
                placeholder="请输入标题"
                maxlength="50"
                show-word-limit
            ></el-input>
          </el-form-item>

          <el-form-item
              label="简短内容"
              :prop="'contents.' + activeLanguage + '.content'"
              class="required-field"
          >
            <el-input
                v-model="messageForm.contents[activeLanguage].content"
                type="textarea"
                :rows="3"
                placeholder="请输入简短内容"
                maxlength="200"
                show-word-limit
            ></el-input>
          </el-form-item>

          <el-form-item
              label="正文内容"
              :prop="'contents.' + activeLanguage + '.body'"
          >
            <div class="quill-editor" :id="'editor-' + activeLanguage"></div>
          </el-form-item>
        </div>

        <!-- 发布设置 -->
        <div class="form-section">
          <h3 class="form-section-title">发布设置</h3>

          <el-form-item label="状态" prop="status">
            <el-radio-group v-model="messageForm.status">
              <el-radio :label="1">保存为草稿</el-radio>
              <el-radio :label="2">立即发布</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>

        <div class="form-actions">
          <el-button @click="goBack">取消</el-button>
          <el-button type="primary" @click="submitForm" :loading="loading">{{ isEdit ? '保存' : '提交' }}</el-button>
        </div>
      </el-form>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.15.13/index.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.min.js"></script>
<script src="js/edit.js"></script>
</body>
</html>
